<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <title>微博签到数据点亮中国-WEBGL</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/hmap-js/dist/hmap.css">
  <style>
    html, body, #map {
      height: 100%;
      padding: 0;
      margin: 0;
    }
    .hmap-control-zoom {
      right: 30px;
    }
  </style>
</head>
<body>
<div id="map"></div>
<script src="https://cdn.jsdelivr.net/npm/hmap-js/dist/hmap.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.js"></script>
<script src="../ajax.js"></script>
<script src="https://cdn.jsdelivr.net/npm/ol3-echarts/dist/ol3Echarts.js"></script>
<!--<script src="../../../dist/ol3Echarts.js"></script>-->
<script>
  var map = new HMap('map', {
    controls: {
      loading: true,
      zoomSlider: true,
      fullScreen: false
    },
    view: {
      center: [11464017.313439976, 3934744.6720247352],
      extent: [-2.0037507067161843E7, -3.0240971958386254E7, 2.0037507067161843E7, 3.0240971958386205E7],
      projection: 'EPSG:102100',
      tileSize: 256,
      zoom: 5, // resolution
    },
    baseLayers: [
      {
        layerName: 'TileXYZ',
        isDefault: true,
        layerType: 'TileXYZ',
        projection: 'EPSG:3857',
        layerUrl: 'https://s{1-5}.geohey.com/s/mapping/midnight/all?x={x}&y={y}&z={z}&retina=&ak=ZmI0YmI5MWE4NjEyNDlkNTkxY2NmNmQ1NDYwOWI5ZmU'
      }
    ]
  });
  var echartslayer = new ol3Echarts(null, {
    hideOnMoving: true,
    hideOnZooming: true
  });
  echartslayer.appendTo(map.getMap());
  getJSON('../../json/weibo-gl.json', function (rawData) {
    var weiboData = rawData.map(function (serieData, idx) {
      var px = serieData[0] / 1000;
      var py = serieData[1] / 1000;
      var res = [[px, py]];
      for (var i = 2; i < serieData.length; i += 2) {
        var dx = serieData[i] / 1000;
        var dy = serieData[i + 1] / 1000;
        var x = px + dx;
        var y = py + dy;
        res.push([x.toFixed(2), y.toFixed(2), 1]);
        px = x;
        py = y;
      }
      return res;
    });
    var option = {
      title: {
        text: '微博签到数据点亮中国',
        left: 'center',
        top: 'top',
        textStyle: {
          color: '#fff'
        }
      },
      tooltip: {},
      legend: {
        left: 'right',
        data: ['强', '中', '弱'],
        textStyle: {
          color: '#ccc'
        }
      },
      series: [
        {
          name: '弱',
          type: 'scatterGL',
          symbolSize: 1,
          itemStyle: {
            shadowBlur: 2,
            shadowColor: 'rgba(37, 140, 249, 0.8)',
            color: 'rgba(37, 140, 249, 0.8)'
          },
          data: weiboData[0]
        },
        {
          name: '中',
          type: 'scatterGL',
          symbolSize: 1,
          itemStyle: {
            shadowBlur: 2,
            shadowColor: 'rgba(14, 241, 242, 0.8)',
            color: 'rgba(14, 241, 242, 0.8)'
          },
          data: weiboData[1]
        },
        {
          name: '强',
          type: 'scatterGL',
          symbolSize: 1,
          itemStyle: {
            shadowBlur: 2,
            shadowColor: 'rgba(255, 255, 255, 0.8)',
            color: 'rgba(255, 255, 255, 0.8)'
          },
          data: weiboData[2]
        }
      ]
    };
    echartslayer.setChartOptions(option);
  });
</script>
</body>
</html>
